<template>
	<div class="headerNave">
		<div class="left">
			{{$t('common.TonglingColoured')}}
		</div>
		<div class="right">
			<div class="right_left">
				<!--:default-active第几个选中-->
				<el-menu
				  :default-active="activeIndex"
				  class="el-menu-demo"
				  mode="horizontal"
				  @select="handleSelect"
				  background-color="#212D3C"
				  text-color="#fff"
				  active-text-color="#ffd04b">
				  	<el-menu-item index="0"><i class="el-icon-more"></i></el-menu-item>
				  	<el-menu-item index="Index"><i class="layui-icon layui-icon-home"></i></el-menu-item>
				  	<el-menu-item index="My">处理中心</el-menu-item>
				  	<el-submenu index="3">
				    	<template slot="title">我的工作台</template>
				   	 	<el-menu-item index="3-1">移动模块</el-menu-item>
					    <el-menu-item index="3-2">后台模块</el-menu-item>
					    <el-menu-item index="3-3">电商平台</el-menu-item>
					    <el-submenu index="3-4">
					      	<template slot="title">我的工作</template>
					      	<el-menu-item index="3-4-1">选项1</el-menu-item>
					      	<el-menu-item index="3-4-2">选项2</el-menu-item>
					      	<el-menu-item index="3-4-3">选项3</el-menu-item>
					    </el-submenu>
				  	</el-submenu>
				  	<el-menu-item index="4" disabled>消息中心</el-menu-item>
				  	<el-menu-item index="5">订单管理</el-menu-item>
				</el-menu>
			</div>
			
			<div class="right_right">
				<!--:default-active第几个选中-->
				<el-menu
				  :default-active="activeIndex"
				  class="el-menu-demo"
				  mode="horizontal"
				  @select="handleSelect2"
				  background-color="#212D3C"
				  text-color="#fff"
				  active-text-color="#ffd04b">
				  	
				  	<el-menu-item index="6"><el-badge is-dot class="item"><i class="el-icon-bell" ></i></el-badge></el-menu-item>
				  	<el-menu-item index="7"><i class="el-icon-service"></i></el-menu-item>
				  	<el-menu-item index="8"><i class="el-icon-edit"></i></el-menu-item>
				  	<el-menu-item index="9"><i class="el-icon-rank"></i></el-menu-item>
				  	<el-submenu index="10">
				    	<template slot="title">贤心</template>
				   	 	<el-menu-item index="10-1">{{$t('common.BasicInformation')}}</el-menu-item>
					    <el-menu-item index="10-2">{{$t('common.ChangePassword')}}</el-menu-item>
					    <el-menu-item index="10-3" @click="sign_out">{{$t('common.exit')}}</el-menu-item>
				  	</el-submenu>
				  	<el-submenu index="11">
				    	<template slot="title" v-if="tab_language">中文</template>
				    	<template slot="title" v-else="">English</template>
				   	 	<el-menu-item index="11-1" @click="tabLanguage('zh')">中文</el-menu-item>
					    <el-menu-item index="11-2" @click="tabLanguage('en')">English</el-menu-item>
				  	</el-submenu>
				</el-menu>
			</div>
			
			
			
		</div>
		
		
	</div>
</template>

<script>
	import bus from './../home/bus'
	export default{
		name:'headerNav',
		data(){
			return{
				activeIndex: 'Index',
				tab_language:true,
			}
		},
		mounted(){
			
		},
		methods:{
			//中英文切换
			tabLanguage(lang){
				this.$i18n.locale=lang
			},
			//头部导航选中时触发
			handleSelect(key, keyPath) {
		        console.log(key, keyPath);
		        if(key==0){//非子父传值，是否要展开和收起侧边导航
		        	bus.$emit('isCollapse',true)
		        }else{
		        	this.$router.push({name:key})
		        }
		        
		   	},
		   	handleSelect2(key, keyPath) {
		        console.log(key, keyPath);
		    },
		    //点击退出账号
		    sign_out(){
		    	let user_info ={
		    		LoginState:'-1'//登录状态-1代表退出登录，0代表在线
		    	}
		    	user_info=JSON.stringify(user_info)
		    	
		    	localStorage.setItem('user_info',user_info)
		    	this.$router.replace({name:'Login'})
		    }
		},
	}
</script>

<style scoped="scoped" lang="scss">
	.headerNave{
		background: #212D3C;height: 50px;line-height: 50px;display: flex;justify-content: space-between;min-width: 1200px;
		.left{width: 236px;color: white;text-align: center;}
		.right{
			display: flex;justify-content: space-between;width: 100%;
			.right_left{
				height: 50px;
			}
		}
		
	}
</style>